
<template>
    <div class="main-container" id="main-container">
        <div style="background-color: #fff; height:100%;" id="ProductMasterData">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="甘特图展板" key="1">
                    <div style="height: 100%;">
                        <GanttChartChartDemo1></GanttChartChartDemo1>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="甘特图" key="2">
                    <div style="height: 100%;">
                        <GanttChartChartDemo></GanttChartChartDemo>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, } from 'vue'
import emitter from '@/hooks/useEventBus'
import GanttChartChartDemo from './component/GanttChartChartDemo.vue'
import GanttChartChartDemo1 from './component/GanttChartChartDemo1.vue'
import usePermission from '@/store/modules/permission'
export default defineComponent({
    name: 'GanttChartChart',
    setup() {

        const pageData = reactive({
            tableIndex: "1"
        })


        const tabsChange = (e: string | number) => {
            emitter.emit('windowChangeGennter')
            if (e === '1') {
                emitter.emit('GanttChartChartDemo1')
            } else if (e === '2') {
                emitter.emit('GanttChartChartDemo')
            }
        }
        const permissionStore = usePermission()
        return {
            pageData,
            tabsChange,
            permissionStore
        }
    },
    components: {
        GanttChartChartDemo,
        GanttChartChartDemo1
    }
})
</script>
<style scoped></style>